<template>
  <div :class="classes">
    <div :class="barGroupClasses">
      <i v-for="i in 8" :class="barClasses" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    split: {
      validator(value) {
        return ["vertical", "horizontal"].indexOf(value) >= 0;
      },
      required: true
    },
    className: String
  },
  computed: {
    classes() {
      const classes = ["splitter-pane-resizer", this.split, this.className];
      return classes.join(" ");
    },
    barGroupClasses() {
      const classes = [
        "splitter-pane-resizer-bar-group",
        this.split,
        this.className
      ];
      return classes.join(" ");
    },
    barClasses() {
      const classes = ["splitter-pane-resizer-bar", this.split, this.className];
      return classes.join(" ");
    }
  }
};
</script>

<style scoped>
.splitter-pane-resizer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.splitter-pane-resizer.horizontal {
  height: 6px;
  width: 100%;
  background: #f8f8f9;
  border-left: none;
  border-right: none;
  cursor: row-resize;
  border: 1px solid #dcdee2;
}

.splitter-pane-resizer.vertical {
  width: 5px;
  height: 100%;
  background: #f8f8f9;
  border-top: none;
  border-bottom: none;
  cursor: col-resize;
  border: 1px solid #dcdee2;
  margin-left: -2px;
}

.splitter-pane-resizer-bar.vertical {
  width: 4px;
  height: 1px;
  background: rgba(23, 35, 61, 0.25);
  float: left;
  margin-top: 3px;
}

.splitter-pane-resizer-bar.horizontal {
  height: 4px;
  width: 1px;
  background: rgba(23, 35, 61, 0.25);
  float: left;
  margin-right: 3px;
}

.splitter-pane-resizer-bar-group.vertical {
  top: 50%;
  height: 32px;
  position: absolute;
  overflow: hidden;
}

.splitter-pane-resizer-bar-group.horizontal {
  left: 50%;
  width: 32px;
  position: absolute;
  overflow: hidden;
}
</style>
